<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <link rel="stylesheet" href="../statics/css/bootstrap.min.css">
    <link rel="stylesheet" href="../statics/css/base.css">
    <link rel="stylesheet" href="/statics/css/css.css">
</head>

<body style="background-image: url('/statics/img/fish2.png');">

    <div class="container">
        <div class="col">
            <div class="alert alert-warning text-center invisible" role="alert" style="width: 42rem;margin-left: 12.5rem;">
                <strong>提示：</strong> <font id="msgId">出错啦😔</font>
            </div>
        </div>

        <div class="row align-items-center" style="height: 550px;" >
            <div class="col">
                <img src="/statics/img/1.gif" alt="">
            </div>

            <!-- 中间的卡片 -->
            <div class="col">
                <div>
                    <!-- 卡片设置 -->
                    <div class="card" style="width: 33rem; margin-top: 5rem;  background-color: rgba(255, 255, 255, 0.3);">
                        <div class="card-body">
                            <!-- 注册 -->
                            <h5 class="card-title" style="text-align: center;">
                                <div class="alert-danger" role="alert" style="width: 300px; margin-left: 6rem;">
                                    ***~~~~注册~~~~***
                                </div>
                                <img src="../img/fish.png" alt="">
                            </h5>
                            <!-- 账号密码 -->
                            <form id="registerForm">
                                <div class="form-group">
                                    <label for="exampleInputEmail1">账号：</label>
                                    <input type="email" class="form-control" id="username" name="username"
                                        aria-describedby="emailHelp" style=" background-color: rgba(255, 255, 255, 0.3);">
                                </div>
                                <div class="form-group">
                                    <label for="exampleInputPassword1">密码：</label>
                                    <input type="password" class="form-control" id="password" name="password" style=" background-color: rgba(255, 255, 255, 0.3);">
                                </div>
                                <div class="form-group">
                                    <label for="exampleInputPassword1">确认密码：</label>
                                    <input type="password" class="form-control" id="confirmpassword" name="confirmpassword" style=" background-color: rgba(255, 255, 255, 0.3);">
                                </div>
                                <div style="margin-left: 15rem;">
                                    <button type="button" class="btn btn-outline-success" style="width: 120px;"
                                        onclick="jump()">注册</button>
                                    <button type="button" class="btn btn-outline-warning" onclick="a()"
                                        style="width: 120px;">取消</button>
                                </div>

                            </form>
                        </div>

                    </div>
                </div>
            </div>
            <div class="col">
                <img src="../img/1.gif" alt="">
            </div>
            <div>
                
            </div>
        </div>
    </div>
    <div id="footer">
        Fish © 2021
        <!-- 域名备案 -->
        <a href="http://beian.miit.gov.cn/" target="_blank">闽ICP备2020021665号</a>
        </a>
    </div>

    <script src="../statics/js/jquery-3.6.0.min.js"></script>
    <script src="../statics/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
</body>
<script>
    function a(){
        window.location.href = '/login';
    }
    function jump() {
        var uid = $('#username').val();
        var pwd = $('#password').val();
        var confirmpwd = $('#confirmpassword').val();

        if (uid.length > 0 && pwd.length > 0 && pwd === confirmpwd) {
            axios({
                method: 'post',
                url: '/registerDone',
                data: $('#registerForm').serialize(),
            }).then(function (res) {
                res = res.data;
                if (res.code === 200) {
                    window.location.href = '/login';
                } else {
                    alert_fn(res.msg);
                    console.log(res.msg);
                }
            }).catch((err) => {
                alert_fn(err);
                console.log(err);
            });
        } else {
            alert_fn('出错啦😔！用户名、密码不能为空，并且两次密码需要一致');
        }
    }

    function alert_fn(msg){
        $('#msgId').text(msg);
        $('.alert').removeClass('invisible');
        setTimeout(() => {
            $('.alert').addClass('invisible');
        }, 5000);
    }
</script>
</html>